<template>


	<div class="news-wrapper">
		<div class="news-list">
			<div class="news-item" v-for="(item,index) in list" :key="index">

				<div class="news-date">
					{{item.time}}
				</div>
				<div v-if="item.type==='text'||item.type==='image'" class="news-type01">
					<div class="news-model">
						<div class="news-icon">
							<image src="@/static/images/logo.png" mode="scaleToFill"></image>
						</div>
						<div class="news-wrap">
							<!-- 文本 -->
							<div v-if="item.type==='text'" class="news-text-wrapper">
								{{item.context}}
							</div>
							<!-- 图片 -->
							<div v-if="item.type==='image'" class="news-image-wrapper">

								<div class="news-name">{{item.context}}</div>
								<div class="news-pic" @click="handleImg(item.description)">
									<image :src="item.description" mode="widthFix"></image>
								</div>

							</div>


						</div>

					</div>

				</div>
				<div v-if="item.type==='video'">

					<div class="news-model">
						<div class="news-icon">
							<image src="@/static/images/logo.png" mode="scaleToFill"></image>
						</div>
						<div class="news-wrap">

							<!-- 视频 -->
							<div v-if="item.type==='video'" class="news-video-wrapper">
								<div class="news-video" @click="handleVideoDetails(item)">
									<div class="news-coverImage">
										<image :src="item.coverImage" mode="widthFix"></image>
									</div>
									<span class="icon-play">
										<u-icon name="play-circle" color="#fbeeee" size="42"></u-icon>
									</span>
									<div class="news-title hide2">
										{{item.title}}
									</div>
								</div>

							</div>

						</div>

					</div>

					<div class="news-model mt20">
						<div class="news-icon">
							<image src="@/static/images/logo.png" mode="scaleToFill"></image>
						</div>
						<div class="news-wrap">

							<!-- 视频 -->
							<div v-if="item.type==='video'" class="news-video-wrapper">

								<div class="news-video-content">
									{{item.context}}
								</div>
							</div>

						</div>

					</div>

				</div>

			</div>
		</div>

		<div class="clearfix"></div>

		<div ref="scrollContainer" class="pageScrollTo" id="pageScrollTo"></div>
	</div>

</template>
<script>
	import {
		getNewsList
	} from "@/common/api.js";
	export default {
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				allPages: 0,
				list: [],

				backUrl: 'http://wxai.cmqps.xyz:8090',
				scrollTop: 0,


			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			async init() {

				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				}
				this.list = []
				await this.getList(0)



			},
			async getList(type) {

				const res = await getNewsList(this.queryParams)
				let list = res.records || []

				list.forEach((item) => {
					item.time = this.formatCreateTime(item.createTime)
					if (item.type === 'image' || item.type === 'video') {
						// 图片 视频
						if (item.type === 'image') {
							const mediaUrl = item.description || ''
							if (mediaUrl !== '') {
								item.description = this.backUrl + mediaUrl
							}
						} else {
							const mediaUrl2 = item.description || ''
							if (mediaUrl2 !== '') {
								item.description = this.backUrl + mediaUrl2
							}

							const coverImage = item.coverImage || ''
							if (coverImage !== '') {
								item.coverImage = this.backUrl + coverImage
							}
						}
					}
				})
				this.list = [
					...list,
					...this.list
				]

				this.allPages = res.pages || 0

				if (type === 0) {
					this.$nextTick(()=>{
						this.scrollToBottom()
					})
				}

			},
			async onPullDownRefresh() {
				this.queryParams.pageNum += 1
				if (this.queryParams.pageNum > this.allPages) {

					// 显示加载提示
					this.$u.toast('暂无数据！');

					// 停止下拉刷新动画
					uni.stopPullDownRefresh();

				} else {
					await this.getList(1)
					// 停止下拉刷新动画
					uni.stopPullDownRefresh();
				}



			},
			handleVideoDetails(row) {
				// this.$store.videoDetailsInfo = row
				uni.setStorageSync("videoDetails", JSON.stringify(row));


				// 基础用法
				uni.navigateTo({
					url: '/pages/newDetails',
					success: () => console.log('跳转成功'),
					fail: (err) => console.error('跳转失败', err)
				})

			},
			handleImg(url) {
				wx.previewImage({
					urls: [url], //接受的是一个数组，默认展示第一张
					current: "",
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				});

			},
			scrollToBottom() {

				this.$nextTick(() => {
					// uni.pageScrollTo({
					// 	scrollTop: 9999, // 使用一个足够大的数字来确保滚动到最底部
					// 	duration: 300 // 滚动动画的时长，单位ms
					// });
					// uni.pageScrollTo({
					// 	duration: 300,
					// 	selector: '#pageScrollTo'
					// });
					// uni.pageScrollTo({
					// 	scrollTop: 99999, // 设置一个足够大的值确保滚动到底部
					// 	duration: 300, // 过渡动画时间
					// 	complete: () => {
					// 		console.log('滚动完成');
					// 	}
					// });
					const scrollContainer = this.$refs.scrollContainer;
					if (scrollContainer) {
						scrollContainer.scrollIntoView({
							behavior: 'auto'
						});
						// scrollContainer.scrollIntoView({ behavior: 'smooth' });

					}
				});



			},

			formatCreateTime(inputTime) {
				const now = new Date();
				const inputDate = new Date(inputTime);

				// 判断是否是今天
				const isToday = inputDate.toDateString() === now.toDateString();

				// 判断是否是昨天
				const yesterday = new Date(now);
				yesterday.setDate(yesterday.getDate() - 1);
				const isYesterday = inputDate.toDateString() === yesterday.toDateString();

				// 判断是否是一周以内
				const oneWeekAgo = new Date(now);
				oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
				const isWithinWeek = inputDate >= oneWeekAgo && inputDate < yesterday;

				// 如果是今天
				if (isToday) {
					const hours = inputDate.getHours().toString().padStart(2, '0');
					const minutes = inputDate.getMinutes().toString().padStart(2, '0');
					return `${hours}:${minutes}`;
				}

				// 如果是昨天
				if (isYesterday) {
					const hours = inputDate.getHours().toString().padStart(2, '0');
					const minutes = inputDate.getMinutes().toString().padStart(2, '0');
					return `昨天 ${hours}:${minutes}`;
				}

				// 如果是一周以内
				if (isWithinWeek) {
					const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
					const weekday = weekdays[inputDate.getDay()];
					const hours = inputDate.getHours().toString().padStart(2, '0');
					const minutes = inputDate.getMinutes().toString().padStart(2, '0');
					return `${weekday} ${hours}:${minutes}`;
				}

				// 一周以上，显示完整日期时间
				const year = inputDate.getFullYear();
				const month = (inputDate.getMonth() + 1).toString().padStart(2, '0');
				const day = inputDate.getDate().toString().padStart(2, '0');
				const hours = inputDate.getHours().toString().padStart(2, '0');
				const minutes = inputDate.getMinutes().toString().padStart(2, '0');
				const seconds = inputDate.getSeconds().toString().padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}


		}
	}
</script>

<style lang="scss">
	.news-wrapper {
		width: 100vw;
		// height: 100vh;
		background: #EDEDED;
		border-top: 1px solid #d9d9d9;

		height: 100vh;
		overflow-y: auto;


		.news-list {
			padding-bottom: 40rpx;
			overflow: hidden;

			.news-item {
				padding: 0 15rpx;

			}

			.news-date {
				text-align: center;
				margin: 38rpx auto 20rpx;
				color: #666;
				font-size: 28rpx;
			}

			.mt20 {
				margin-top: 30rpx;
			}

			.news-model {
				overflow: hidden;

				.news-icon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 30rpx;
					float: left;
					background: #fff;
					border-radius: 10rpx;

					text-align: center;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						border-radius: 100%;
					}
				}

				.news-wrap {
					// width: calc(100% - 200rpx);
					width: calc(100% - 110rpx);
					float: left;
					padding: 15rpx 20rpx;
					border-radius: 10rpx;
					background: #fff;
					box-sizing: border-box;
					position: relative;

					&::before {
						content: "";
						position: absolute;
						top: 8px;
						left: -10px;
						width: 0;
						height: 0;
						border-top: 10px solid transparent;
						border-right: 10px solid #ffffff;
						border-bottom: 10px solid transparent;
					}


					// 文本
					.news-text-wrapper {
						color: #191919;
						font-size: 32rpx;
						line-height: 56rpx;
					}

					// 图片
					.news-image-wrapper {
						.news-name {
							color: #191919;
							font-size: 32rpx;
							line-height: 56rpx;

						}

						.news-pic {
							width: 56%;
							border-radius: 10rpx;
							margin-top: 20rpx ;
							overflow: hidden;

							image {
								width: 100%;
								// height: 100%;
								// border-radius: 100%;
							}
						}
					}

					// 视频
					.news-video-wrapper {
						.news-video {
							position: relative;

							.news-coverImage {
								width: 100%;
								border-radius: 10rpx;
								margin: 20rpx auto 0;
								overflow: hidden;

								image {
									width: 100%;
									// height: 100%;
									// border-radius: 100%;
								}
							}

							.icon-play {
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							}

							.news-title {
								// background: rgba(0, 0, 0, 0.35);
								// height: 60rpx;/*  */
								line-height: 40rpx;
								position: absolute;
								padding: 0 20rpx;
								left: 0;
								bottom: 20rpx;
								color: #fff;
								font-size: 30rpx;
								box-sizing: border-box;
							}
						}

						.news-video-content {
							color: #191919;
							font-size: 32rpx;
							line-height: 56rpx;
						}
					}
				}

			}
		}
	}

	.pageScrollTo {
		width: 100%;
		height: 1px;
	}
</style>